<template>
	<div class="HeaderBar">
		<aside>
			<!-- <n-breadcrumb>
				<n-breadcrumb-item>
					<n-icon :component="BarChart" />
					数据报告
				</n-breadcrumb-item>
				/
				<n-breadcrumb-item>
					<n-icon :component="PieChart" />
					可视化面板
				</n-breadcrumb-item>
			</n-breadcrumb> -->
		</aside>
		<ul>
			<li>
				<n-icon size="20" :component="SettingsOutline" />
			</li>
			<li>
				<n-icon size="20" :component="PersonOutline" />
			</li>
			<li>
				<n-avatar
					round
					:size="40"
					src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
				/>
			</li>
		</ul>
	</div>
</template>

<script lang="ts">
import { NIcon } from "naive-ui";
import {
	BarChart,
	HomeOutline,
	PeopleOutline,
	PieChart,
	SettingsOutline,
	PersonOutline,
	MenuOutline,
} from "@vicons/ionicons5";
import { defineComponent } from "vue";

export default defineComponent({
	setup() {
		return {
			BarChart,
			PieChart,
			PersonOutline,
			SettingsOutline
		};
	},
});
</script>

<style scoped lang="scss">
.HeaderBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	// height: 1;
	height: 100%;
	// background-color: pink;
	box-sizing: border-box;
	// background-color: #f8f8f8;
	aside {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
		height: 80%;
		border-radius: 10px;
		background-color: #fff;
		box-shadow: var(--boxShadow3);
	}
	ul {
		display: flex;
		align-items: center;
		justify-content: space-around;
		// width: 15%;
		height: 80%;
		border-radius: 10px;
		box-shadow: var(--boxShadow3);
		// background-color: #fff;
		// box-shadow:  1px 1px 10px #c7c7c7,
		//      -1px -1px 10px #f9f9f9;
		li {
			margin: 0 15px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
